/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="project-view__wrap">
        <common-title :title-name="pageTitle" />
        <div class="view__container">
            <div
                v-for="(item, index) in list"
                :key="index"
                class="view__item"
                @click="_handleEnterRouter(item)">
                <div class="view-left">
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <div class="content">
                        <div class="img"
                             :class="item.imgName"></div>
                        <div class="detail">
                            <div class="number">
                                {{ item.number
                                }}<span class="unit"><lang>个</lang></span>
                            </div>
                            <div class="sub-title">
                                {{ item.subTitle }}
                            </div>
                        </div>
                        <div v-if="item.showSecondItem"
                             class="detail m-r0">
                            <div class="number">
                                {{ item.secondNumber
                                }}<span class="unit"><lang>个</lang></span>
                            </div>
                            <div class="sub-title">
                                {{ item.secondSubTitle }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="view-right">
                    <div class="view-arrow"></div>
                </div>
            </div>
        </div>
        <div
            class="training__container">
            <div class="top">
                <div class="title">
                    <lang>训练任务记录</lang>
                </div>
                <div class="more"
                     @click="_enterTaskTraining">
                    <lang>查看更多</lang>
                </div>
            </div>
            <sf-table ref="table"
                      class="table-data"
                      :options="options_fix">
                <sf-table-column data-index="name"
                                 :default-width="60">
                    <lang>任务名称</lang>
                </sf-table-column>
                <sf-table-column data-index="status"
                                 :default-width="60">
                    <lang>状态</lang>
                </sf-table-column>
                <template slot="name"
                          slot-scope="{ record }">
                    <span v-if="!record.recurring">{{ record.name }}</span>
                    <span v-else>{{ updateTimeName(record) }}</span>
                </template>
                <template slot="status"
                          slot-scope="{ record }">
                    <div
                        class="task-flex"
                        :class="repositoryStatusClass(record.status)">
                        <span class="status-img task-common"></span>
                        <span class="status-text">{{
                            repositoryStatusText(record.status)
                        }}</span>
                    </div>
                </template>
            </sf-table>
        </div>
        <!-- <empty-panel v-else
                     :title="_('没有训练任务')" /> -->
    </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator';
import commonTitle from '../component/common_title.vue';

// import EmptyPanel from 'src/components/empty_panel';
import urlAdapter from 'src/home/mod_common/url_adapter';
const PROJECT_VIEW_IRL = {
    get: urlAdapter('projectlist/show')
};

/*训练状态*/
const REPOSITORY_STATUS_TEXT = {
    0: _('任务完成'),
    1: _('任务中'),
    2: _('任务失败'),
    3: _('任务失败')
};
const REPOSITORY_STATUS_CLASS = {
    0: 'task-success',
    1: 'task-run',
    2: 'task-fail',
    3: 'task-fail'
};

import { SfTableOptions, SfTable } from '@sxf/sf-vue-component';

import moment from 'moment';

@Component({
    components: {
        commonTitle

        // EmptyPanel
    }
})
export default class ProjectViewWrap extends Vue {
    @Ref() table!: SfTable<{}>;

    pageTitle = _('概览');
    list = [
        {
            name: _('AI Flow'),
            imgName: 'ai_flow',
            number: 0,
            subTitle: _('总数'),
            url: '/project_manager/project_index/visual_ai_flow'
        },
        {
            name: _('任务管理'),
            imgName: 'task_manager',
            number: 0,
            subTitle: _('总数'),
            url: '/project_manager/project_index/visual_task_manager'
        },
        {
            name: _('模型仓库'),
            imgName: 'model_repository',
            number: 0,
            subTitle: _('总数'),
            url: '/project_manager/project_index/model_repository'
        },
        {
            name: _('服务管理'),
            imgName: 'service_manager',
            number: 0,
            subTitle: _('正式发布'),
            showSecondItem: true,
            secondNumber: 0,
            secondSubTitle: _('灰度发布'),
            url: '/project_manager/project_index/service_manager'
        }
    ];
    showEmptytraining = true;
    options_fix: SfTableOptions<{}> = {

        // 配置这个后才可以实现保持勾选状态
        idProperty: 'id',
        selectionHide: true
    };
    creatTime = '';
    user = '';

    mounted (): void {
        this.refreshGrid();
    }
    get projectId () {
        return this.$route.query.projectId || '';
    }

    repositoryStatusClass (status: string) {
        return REPOSITORY_STATUS_CLASS[status];
    }
    repositoryStatusText (status: string) {
        return REPOSITORY_STATUS_TEXT[status];
    }
    updateTimeName (record) {
        const EIGHT = 8;
        let time = moment(record.createAt)
            .utcOffset(EIGHT)
            .format('YYYY-MM-DD HH:mm:ss');
        return `${record.name} （${time}）`;
    }

    async refreshGrid () {
        let jsonData = await this.$ajax.get(
            `${PROJECT_VIEW_IRL.get}/${this.projectId}`
        );
        let table = this.table;
        let { success, data } = jsonData;

        // this.showEmptytraining = data.miniRunVoList.length === 0;
        if (!success) {
            table.loadData([]);
            return;
        }
        let viewList = [
            data.aiFlowNum,
            data.taskNum,
            data.modelNum,
            data.officialReleaseNum
        ];
        viewList.forEach((item, index) => {
            this.list[index].number = item;
        });
        this.list[this.list.length - 1].secondNumber =
            data.grayscalePublishingNum;
        if (!table) {
            return;
        }
        this.$nextTick(()=>{
           table && table.loadData(data.miniRunVoList || []);
        });
    }
    _handleEnterRouter (item) {
        this.$router.push({
            path: item.url,
            query: this.$route.query
        });
    }
    _enterTaskTraining () {
        this.$router.push({
            path: `/project_manager/project_index/visual_task_manager`,
            query: this.$route.query
        });
    }
}
</script>
<style lang="less">
.project-view__wrap {
    width: 100%;
    height: calc(100% - 16px);
    .table-data {
        height: calc(100% - 40px);
        .sfv-scrollbar-horizontal {
            display: none;
        }
        .sfv-grid {
            /* border: none; */
            height: 100%;
            display: flex;
            flex-direction: column;

            .sfv-table {
                flex: 1;
            }
        }
    }

    .cluster-empty-panel__container {
        height: calc(100% - 178px);
    }
    @-webkit-keyframes animal {
        0% {
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
        }
    }
    .training__container {
        width: 50%;
        height: 550px;

        .top {
            display: flex;
            margin-bottom: 8px;
            height: 40px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            .title {
                font-size: 14px;
                color: #343a41;
                position: relative;
                padding-left: 12px;
                &::before {
                    background: #0536b3;
                    width: 4px;
                    height: 16px;
                    position: absolute;
                    display: block;
                    left: 1px;
                    top: 2px;
                    content: "";
                }
            }
            .more {
                color: #204ed9;
                cursor: pointer;
            }
        }
    }
    .view__container {
        display: flex;
        margin-bottom: 12px;
        .view__item {
            flex: 1;
            border: 1px solid #eeeeee;
            border-right: none;
            border-radius: 2px 0 0 2px;
            height: 112px;
            display: flex;
            justify-content: space-between;
            padding: 14px;
            cursor: pointer;
            &:last-child {
                border-right: 1px solid #eeeeee;
            }
            &:hover,
            &.active {
                background: #f6f9ff;
                .view-right {
                    .view-arrow {
                        background: url(../../../img/ai_flow/click_arrow_active.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
            .view-right {
                height: 100%;
                display: flex;
                align-items: center;
                .view-arrow {
                    width: 20px;
                    height: 20px;
                    background: url(../../../img/ai_flow/click_arrow_normal.png)
                        no-repeat;
                    background-size: 100% 100%;
                }
            }
            .name {
                font-size: 14px;
                color: #1f1f1f;
                margin-bottom: 15px;
            }
            .content {
                display: flex;
                align-items: center;
                .img {
                    width: 40px;
                    height: 40px;
                    margin-right: 18px;
                    margin-top: 10px;
                    &.ai_flow {
                        background: url(../../../img/ai_flow/ai_flow.png)
                            no-repeat;
                        background-size: 100% 100%;
                        height: 35px;
                    }
                    &.task_manager {
                        width: 36px;
                        background: url(../../../img/ai_flow/task_manager.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                    &.model_repository {
                        background: url(../../../img/ai_flow/model_repository.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                    &.service_manager {
                        background: url(../../../img/ai_flow/service_manager.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .detail {
                    font-size: 12px;
                    color: #a3a3a3;
                    margin-right: 23px;
                    &.m-r0 {
                        margin-right: 0;
                    }
                    .number {
                        font-size: 24px;
                        color: #1f1f1f;
                        margin-bottom: 3px;
                        margin-left: -3px;
                        .unit {
                            font-size: 12px;
                            color: #a3a3a3;
                            margin-left: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
